<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glassmorphism Calendar</title>
    <link rel="stylesheet" href="./dycalendar.css">
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <section>
        <div class="box">
            <div class="container">
                <div id="dycalendar"></div>
            </div>
        </div>
    </section>
    <script src="./dycalendar.js"></script>
    <script>
        dycalendar.draw({
            target: '#dycalendar',
            type: 'month',
            dayformat:'full',
            monthformat:'full',
            highlighttargetdate: true,
            prevnextbutton:'show'
        })
    </script>
    <script type="text/javascript" src="./vanilla-tilt.js"></script>
    <script type="text/javascript">
        VanillaTilt.init(document.querySelector(".container"), {
            max: 15,
            speed: 400,
            glare:true,
            "max-glare":0.2
        });
        </script> 
</body>
</html>